<%--
  Created by IntelliJ IDEA.
  User: ZhuChunXiao
  Date: 2017/5/25
  Time: 15:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<div id="page-content" class="panel">
  <div class="panel-heading">
    <ul class="nav nav-tabs">
      <li class="active"><a  href="#s1" id="first" data-toggle="tab">全部</a></li>
      <li class=""><a  href="#s2" id="second" data-toggle="tab">审批中</a></li>
      <li class=""><a  href="#s3" id="third" data-toggle="tab">被退回</a></li>
      <li class=""><a  href="#s4" id="fourth" data-toggle="tab">已完成</a></li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="s1">
      <div class="row">
        <div class="col-lg-12">
          <div class="panel">
            <%--<div class="panel-heading">
              <h3 class="panel-title"> 个人待办事项</h3>
            </div>--%>
            <div class="panel-body">
              <div class="table-jqgrid">
                <table id="ajax_allData_table" >
                </table>
                <div id="ajax_allData_list_page">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane fade in " id="s2" style="margin: 10px;">
      <div class="row">
        <div class="col-lg-12">
          <div class="panel">
            <div class="panel-body">
              <div class="table-jqgrid">
                <table id="ajax_runningData_table" >
                </table>
                <div id="ajax_runningData_list_page">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  <div class="tab-pane fade in" id="s3" style="margin: 10px;">
    <div class="row">
      <div class="col-lg-12">
        <div class="panel">
          <div class="panel-body">
            <div class="table-jqgrid">
              <table id="ajax_backData_table" >
              </table>
              <div id="ajax_backData_list_page">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="tab-pane fade in" id="s4" style="margin: 10px;">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel">
        <div class="panel-body">
          <div class="table-jqgrid">
            <table id="ajax_finishData_table" >
            </table>
            <div id="ajax_finishData_list_page">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


</div>



<script type="text/javascript">
    $(function() {
        load_data_jqGrid("ajax_allData","");
        $('#second').click(function(){
            setTimeout(function () {
                load_data_jqGrid("ajax_runningData",1);
            },200)
        });
        $('#third').click(function(){
            setTimeout(function () {
                load_data_jqGrid("ajax_backData",5);
            },200)
        });
        $('#fourth').click(function(){
            setTimeout(function () {
                load_data_jqGrid("ajax_finishData",2);
            },200)
        });

    });

    function load_data_jqGrid(id,type){
        jQuery("#"+id+"_table").jqGrid({
            url:'../main/taskRecord/myData?type='+type,
            datatype: "json",
            loadonce: true,
            colNames:['表单名称','所属模块','申请人','创建时间','url',"id"],
            colModel:[
                {name:'pname',index:'pname', width:600,searchoptions:{sopt:['cn']}},
                {name:'module',index:'module', width:100,searchoptions:{sopt:['cn']}},
                {name:'toUser',index:'toUser', width:100,searchoptions:{sopt:['cn']}},
                {name:'time',index:'time', width:100,searchoptions:{sopt:['cn']}},
                {name:'url',index:'url', width:0,search:false,sortable:false,hidden:true},
                {name:'docId',index:'docId',search:false,hidden:true,key:true}
            ],
            rowNum : 10,
            rowList:[10,20,30],
            pager : '#'+id+'_list_page',
            sortname : '',
            sortorder : "",
            gridComplete:function(){
                $('.ui-search-oper').hide();
              //  $(".ui-jqgrid-bdiv").css("overflow-x","hidden");
              //  jqGridStyle();
            },
            onSelectRow: function (rowId, status, e) {
                var rowId = $("#"+id+"_table").jqGrid('getGridParam','selrow');
                var rowDatas = $("#"+id+"_table").jqGrid('getRowData', rowId);
            },
            ondblClickRow:function(rowid, iRow, iCol, e){
                var rowId = $("#"+id+"_table").jqGrid('getGridParam','selrow');
                var rowDatas = $("#"+id+"_table").jqGrid('getRowData', rowId);
                if(rowId !="")
                loadURL(rowDatas.url,$('#page-content'));
            },
            jsonReader: {
                root: "dataRows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems : false
            },
        //    caption : "个人待办事项",
            multiselect : false,
            rownumbers:true,
            gridview:true,
            shrinkToFit:true,
            viewrecords: true,
            autowidth: true,
            height:'auto',
            forceFit:true,
            loadComplete: function() {

            }
        });
        $(window).on('resize.jqGrid', function() {
        //    jQuery("#ajax_todo_table").jqGrid('setGridWidth', $("#ajax_todo_list_row").width());
        })
        $("#"+id+"_table").jqGrid('filterToolbar',{searchOperators:false,stringResult:true});

        $("#"+id+"_table").jqGrid('navGrid', "#"+id+"_list_page", {
            edit : false,
            add : false,
            del : false,
            search:false
        });
    };



</script>


